<template>
	<div class="shop_item">
		<div class="shop_name flex-between">
			<div class="shop_name_left flex-star">
				<input type="checkbox" />
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-shangcheng"></use>
				</svg>
				<span>{{item.shopname}}</span>
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-right"></use>
				</svg>
			</div>
		</div>
		<div class="goods_list flex-star" v-for="(goodsitem,goodsinex) in item.goodslist">
			<input type="checkbox" v-model="goodsitem.ischeck" />
			<img>
			<div class="good_item_more">
				<div class="wordNoWarp">
					{{goodsitem.goodsname}}
				</div>
				<div class="gui_ge">
					<span v-for="(spec,specindex) in goodsitem.goodsspec">{{spec}}</span>
				</div>
				<div class="flex-between">
					<div class="priceitem_box">￥<span class="goods_price">{{goodsitem.price}}</span></div>
					<div class="opt_box flex-star">
						<div class="reduce">-</div>
						<div class="goods_num">{{goodsitem.num}}</div>
						<div class="add" @click="numadd">+</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				
			}
		},
		props:["item"],
		methods:{
			numadd(shopindex,goodsindex){
				console.log(this.goods)
			  // if(this.goods[shopindex].goodslist[goodsindex].num < this.goods[shopindex].goodslist[goodsindex].maxnum){
			  //   this.goods[shopindex].goodslist[goodsindex].num++;
			  // }
			},
			numreduce(shopindex,goodsindex){
			  if(this.goods[shopindex].goodslist[goodsindex].num > 1){
			    this.goods[shopindex].goodslist[goodsindex].num--;
			  }
			},
		}
	}
</script>

<style scoped="scoped">
	.goods_box {
	  color: #333;
	  height: calc(100vh - 3.8rem);
	  overflow-y: scroll;
	}
	
	.goods_list {
	  padding: .2rem;
	}
	
	.goods_list img {
	  width: 1.8rem;
	  height: 1.8rem;
	  background: blue;
	  margin: 0 .15rem;
	  border-radius: 5px;
	}
	
	.good_item_more {
	  width: calc(100% - 2.8rem);
	  height: 1.8rem;
	}
	
	.good_item_more .wordNoWarp {
	  -webkit-line-clamp: 2;
	}
	
	.priceitem_box {
	  color: #14aad1;
	  font-weight: bold;
	}
	
	.goods_price {
	  font-size: .34rem;
	}
	
	.opt_box div {
	  width: .4rem;
	  height: .4rem;
	  border: 1px solid #999;
	  text-align: center;
	  line-height: .4rem;
	  border-radius: 4px;
	}
	
	.opt_box div:nth-child(2) {
	  border: none;
	  width: .5rem;
	  text-align: center;
	}
	
	.opt_box div:nth-child(3) {
	  background: #14aad1;
	  color: white;
	  border: none;
	}
	
	.shop_item {
	  margin: 0 .24rem 0 .24rem;
	  border-radius: 8px;
	  overflow: hidden;
	  background: white;
	}
	
	.goods_box .shop_item:nth-child(n + 2) {
	  margin-top: .2rem;
	}
	
	.shop_name {
	  border: 1px solid #f2f2f2;
	  padding: .2rem;
	}
	
	.goods_box {
	  border-radius: 8px;
	}
	
	.gui_ge {
	  padding: .1rem 0;
	}
	
	.gui_ge span {
	  display: inline-block;
	  font-size: .1rem;
	  color: #999;
	}
	
	.gui_ge span:nth-child(n + 2)::before {
	  content: ";";
	}
</style>
